<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式 -->
<!--    <link rel="stylesheet" href="../elementUI.css">-->
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../base.css">
</head>
<body>
<div id="app">
    <el-row style="margin-top: 30px;">
        <el-col :span="4" :offset="10">
            <h1>用户列表</h1>
        </el-col>
    </el-row>

    <el-table
            :data="page.list"
            style="width: 100%">

        <el-table-column
                prop="userId"
                label="用户id"
                width="180">
        </el-table-column>
        <el-table-column
                prop="registerDate"
                label="注册日期"
                width="180">
        </el-table-column>
        <el-table-column
                prop="province"
                label="省份"
                width="180">
        </el-table-column>
        <el-table-column
                prop="phone"
                label="手机号"
                width="180">
        </el-table-column>
        <el-table-column
                prop="password"
                label="密码"
                width="180">
        </el-table-column>
        <el-table-column
                prop="openSource"
                label="注册渠道"
                width="180">
        </el-table-column>
        <el-table-column
                prop="openId"
                label="注册id"
                width="180">
        </el-table-column>
        <el-table-column
                prop="nikeName"
                label="昵称"
                width="180">
        </el-table-column>
        <el-table-column
                prop="id"
                label="编号"
                width="180">
        </el-table-column>

        <el-table-column
                prop="headPictrue"
                label="头像"
                width="180">
        </el-table-column>
        <el-table-column
                prop="gender"
                label="性别"
                width="180">
        </el-table-column>
        <el-table-column
                prop="forbid"
                label="是否禁止"
                width="180">
        </el-table-column>
        <el-table-column
                prop="district"
                label="区"
                width="180">
        </el-table-column>
        <el-table-column
                prop="creditValue"
                label="信誉值"
                width="180">
        </el-table-column>
        <el-table-column
                prop="country"
                label="国家"
                width="180">
        </el-table-column>
        <el-table-column
                prop="city"
                label="市"
                width="180">
        </el-table-column>
        <el-table-column
                prop="birthday"
                label="生日"
                width="180">
        </el-table-column>
        <el-table-column
                prop="address"
                label="地址"
                width="180">
        </el-table-column>
        <el-table-column fixed="right"
                         label="操作"
                         width="120">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">编辑
                </el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-dialog title="修改信息" :visible.sync="dialogFormVisible">
        <el-form>
            <el-form-item label="信誉值" :label-width="formLabelWidth">
                <el-input v-model="page.list[edgeIndex].creditValue" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="禁止登录" :label-width="formLabelWidth">
                <el-radio v-model="page.list[edgeIndex].forbid" label="是">是</el-radio>
                <el-radio v-model="page.list[edgeIndex].forbid" label="否">否</el-radio>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateUser">确 定</el-button>
        </div>
    </el-dialog>

    <el-row style="margin-top: 30px;">
        <el-col :span="4" :offset="8">
            <div class="block">
                <el-pagination
                        @current-change="handleCurrentChange"
                        :page-size="page.pageSize"
                        layout="prev, pager, next, jumper"
                        :total="page.total">
                </el-pagination>
            </div>
        </el-col>
    </el-row>

</div>
</body>
<script src="../vue.js"></script>
<script src="../elementUI.js"></script>
<!-- vue ajax插件 -->
<script src="../axios.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            page: {},
            pageNum: 0,
            pageSize: 2,
            dialogFormVisible: false,
            formLabelWidth: '120px',
            edgeIndex: 0
        },
        created: function () {
            this.getList();
        },
        methods: {
            //修改用户信息
            updateUser() {
                var creditValue = this.page.list[this.edgeIndex].creditValue;
                var forbid = this.page.list[this.edgeIndex].forbid;
                var id = this.page.list[this.edgeIndex].id;
                if (forbid == '是') {
                    forbid = 1;
                } else {
                    forbid = 0;
                }

                var that = this;
                axios.defaults.withCredentials = true;
                axios.post('http://39.105.59.232/manage/userinfo',
                    {
                        creditValue: creditValue,
                        forbid: forbid,
                        id:id
                    }
                ).then(function (response) {
                    if (response.data.code == 200) {
                        that.getList();
                        that.dialogFormVisible = false
                    } else {
                        that.$alert("更改用户信息失败", "提示");
                    }
                })
            },
            //获取当前页
            handleCurrentChange(val) {
                this.pageNum = val;
                this.getList();
            },
            //编辑
            handleEdit(row, col) {
                this.edgeIndex = row;
                this.dialogFormVisible = !this.dialogFormVisible;
            },
            //获取用户列表
            getList() {
                var that = this;
                axios.defaults.withCredentials = true;
                axios.get('http://39.105.59.232/manage/user/list', {
                    params: {
                        pageNum: that.pageNum,
                        pageSize: that.pageSize
                    }
                }).then(function (response) {
                    if (response.data.code == 200) {
                        var data = response.data.data;
                        for (var user of data.list) {
                            //是否禁止
                            if (user.forbid == 1) {
                                user.forbid = '是';
                            } else {
                                user.forbid = '否';
                            }
                            //性别
                            if (user.gender == 0) {
                                user.gender = '女';
                            } else {
                                user.gender = '男';
                            }
                        }
                        that.page = data;
                    } else {
                        that.$alert("获取用户列表失败", "提示");
                    }
                })
            }
        }
    })
</script>
</html>